<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>
<body>
    <div style="position:relative" id="app">
        <img :src="bk_img_base64" />
        <img  id="box" :src="cut_img_base64"
        v-on:touchstart="bodyTouchStart"
        v-on:touchmove="bodyTouchMove"
        v-on:touchend="bodyTouchEnd"
        :style="`position:absolute;left:${distanceX}px;top:77.5px;`"
        />
    </div>

    <script>
    
    new Vue({
        el: '#app',
        data:{
            distanceX:0,
            distanceY:0,
            touchStartPointX: 0,
            touchStartPointY: 0,
            url:"http://127.0.0.1:500",
            bk_img_base64: "",
            cut_img_base64: "",
            uuid: ""
        },
        created(){
          this.initImage()
        },
        methods:{
            initImage(){
              axios.get(this.url+"/api/slide/image/create").then(res=>{
                console.log("res",res.data)
                this.bk_img_base64 = 'data:image/png;base64,'+res.data.bk_img_base64;
                this.cut_img_base64 = 'data:image/png;base64,'+res.data.cut_img_base64;
                this.uuid = res.data.uuid
              })
            },
            bodyTouchStart(event) {
                // 获得起点X坐标，初始化distance为0
                this.touchStartPointX = event.targetTouches[0].pageX;
                this.touchStartPointY = event.targetTouches[0].pageY;
                this.distanceX = 0;
                this.distanceY = 0;
                
            },
            bodyTouchMove(event) {
              if (event.targetTouches.length > 1) {
                return;
              }
              // console.log(event.targetTouches[0].pageX);
              // 实时计算distance
              this.distanceX = event.targetTouches[0].pageX - this.touchStartPointX;
              this.distanceY = event.targetTouches[0].pageY - this.touchStartPointY;
              // 根据distance在页面上做出反馈。这里演示通过返回按钮的背景变化作出反馈
              console.log(" this.distanceX ", this.distanceX )
              this.distanceX =  this.distanceX <0? 0: this.distanceX 
            },
            bodyTouchEnd(event) {
                // 划动结束，重置数据
                this.touchStartPointX = 0;
                this.touchStartPointY = 0;
                axios.post(
                  this.url+"/api/slide/image/verify/width",
                  {uuid:this.uuid, slide_width:parseInt(this.distanceX)}
                ).then(res=>{
                  console.log("res",res.data)
                  if(!res.data.status) {
                    alert("认证失败，刷新图片")
                    this.initImage()
                    this.distanceX = 0;
                    this.distanceY = 0;
                  }else{
                    alert("认证成功")
                  }
                })
                 
                
              }
        }
    })




    </script>
</body>
</html>